<template>
  <div class="score">
    <ul>
      <li>
        <span class="title">省份</span>
        <div class="form">
          <div class="select">
            <el-select disabled :value="select"
              :placeholder="userInfo.province?userInfo.province.name:realUserInfo.province.name">
            </el-select>
          </div>
        </div>
      </li>
      <li>
        <span class="title">分数</span>
        <div class="form">
           <el-input
            type='number'
            @blur = 'getPosition'
            v-model="userInfo.score" placeholder="请输入分数"></el-input>
        </div>
      </li>
      <li>
        <span class="title">位次</span>
        <div class="form">
           <el-input
            type='number'
            v-model="userInfo.position" placeholder="请输入位次"></el-input>
        </div>
      </li>
      <li>
        <span class="title">文理</span>
        <div class="form radioBox">
          <el-radio-group v-model="userInfo.scienceArt" @change='bindScienceArt'>
            <el-radio label="理科">理科</el-radio>
            <el-radio label="文科">文科</el-radio>
          </el-radio-group>
        </div>
      </li>
      <li>
        <el-button @click="save">保存</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { api } from '@/utils'
export default {
  data () {
    return {
      text: '正在加载数据...',
      // 初始
      data: {},
      userInfo: {
        score: '',
        scienceArt: '理科',
        position: ''
      }, // 用户信息
      isResult: 0,
      select: ''
    }
  },
  props: {
    notProvide: {
      type: Boolean,
      defalut () {
        return false
      }
    }
  },
  computed: {
    ...mapState({
      // firstCome: 'firstCome',
      realUserInfo: 'userInfo'
    })
  },
  created () {
  },
  mounted () {
  },
  methods: {
    bindScienceArt (msg) {
      this.userInfo.scienceArt = msg
      if (this.userInfo.score) {
        this.getPosition()
      }
    },
    saveData () {
      this.$axios.post(api.saveOrUpdateScore, {
        id: this.userInfo ? this.userInfo.id : '',
        scienceArt: this.userInfo.scienceArt,
        score: this.userInfo.score,
        province: {
          id: this.realUserInfo.province.id
        },
        position: this.userInfo.position
      }).then(data => {
        console.log('---保存成功---')
        // this.initData()
        this.$emit('event')
      })
    },
    // 获取位次
    getPosition () {
      if (this.notProvide) return false
      let _params = {
        score: this.userInfo.score,
        scienceArt: this.userInfo.scienceArt,
        provinceId: this.realUserInfo.province.id
      }
      this.$axios.get(api.getPosition, {params: _params}).then(data => {
        if (data) {
          this.userInfo.position = data
        }
      })
    },
    save () {
      if (this.notProvide) {
        this.$message.warning('暂不支持该地区')
        return false
      }
      // 0-50万
      // 若不是体验用户，进行一系列判断
      this.popTime = 5
      let _order = this.userInfo.position + ''
      let _score = this.userInfo.score + ''
      let score = _score.trim()
      let order = _order.trim()
      let reg = /^[0-9]*$/
      // 校验
      if (!score.length) {
        this.$message.warning('请输入您的分数！')
        return
      }
      if (!order.trim().length) {
        this.$message.warning('请输入您的位次！')
        return
      }
      if (score > 1000) {
        this.$message.warning('您输入的分数太高了！')
        return
      }
      if (order > 500000) {
        this.$message.warning('您输入的位次太高了！')
        return
      }
      this.saveData()
      if (reg.test(score) && reg.test(order)) {
        let t = Date.parse(new Date())
        // let t = 1542543200000
        if (t >= this.data.startTime && t <= this.data.endTime && this.editTime > this.data.editCnt) {
          this.gaokaoShow = true
          clearInterval(this.interval)
          this.interval = setInterval(() => {
            this.popTime -= 1
            if (this.popTime === 0) {
              clearInterval(this.interval)
            }
          }, 1000)
        } else {
          this.saveData()
        }
      } else {
        this.$message.error('温馨提示，分数和位次都是正整数哦！')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.score {
  position: relative; z-index:2;
  min-height:100%;
  height:auto; border-radius:10px;
  padding:65px 40px 0;
  // background:linear-gradient(90deg,rgba(130,221,248,1) 0%,rgba(75,184,238,1) 100%);
  ul{
    display:flex;
    flex-direction: column;
    li{
      display:flex;
      align-items:center;
      margin-bottom:15px;
      .title{
        font-size:16px;
        color:$light;
        margin-right:10px;
      }
      /deep/ .form{
        flex:1;
        .el-select{
          // width:auto;
          // width:100px;
          .el-input__inner{
            background:rgba(255,255,255,0.2);
            color:$light;
            &::-webkit-input-placeholder{
              color:#FFF
            }
          }
          .el-select__caret{
            color:$light;
          }
        }
        .el-input__inner{
          border:none;
          border-radius: 40px;
          padding:0 20px;
        }
        .el-radio__inner{
          width:20px; height:20px;
          border-color:$light;
          background:transparent;
          &:after{
            width:20px; height:20px;
            content:"✔";
            text-align:center;
            line-height:20px;
            color:$positive;
          }
        }
        .el-radio__label{
          color:$light;
        }
        &.radioBox{
          margin:10px 15px;
        }
      }
      /deep/ .el-button{
        border-radius: 40px;
        border:none;
        margin:0 auto;
        width:100px;
      }
    }
  }
}
</style>
